<template>
<div class="form-item">
  <div class="form-item-fields" :class="{'form-item-fields__error': showError || errorValid.showError}">
    <slot></slot>
  </div>
  <!-- <transition name="message"> -->
  <div class="form-item__message" v-if="showError || errorValid.showError">
    {{ errorValid.errorMessage ||errorMessage }}
  </div>
  <!-- </transition> -->
</div>
</template>

<script>
import schema from "async-validator"
import utils from '@/utils'

export default {
  props: {
    prop: String,
    errorValid: {
      type: Object,
      default: function() {
        return {
          showError: false,
          errorMessage: ""
        }
      }
    }
  },
  data() {
    return {
      showError: false,
      errorMessage: ""
    };
  },
  watch: {
    model: function(newValue) {
      Object.keys(newValue).forEach(key => {
        if (!Array.isArray(newValue[key]) && newValue[key]) {
          this.validate()
        } else if (Array.isArray(newValue[key]) && newValue[key].length) {
          this.validate()
        }
      })
    }
  },
  computed: {
    rule() {
      let obj = {};
      Object.keys(this.$parent.rules).forEach(key => {
        if (key == this.prop) {
          obj[key] = this.$parent.rules[key];
        }
      });
      return obj;
    },
    model() {
      let obj = {};
      Object.keys(this.$parent.model).forEach(key => {
        if (key == this.prop) {
          obj[key] = this.$parent.model[key];
        }
      });
      return obj;
    }
  },
  mounted() {
   
    if (!utils.isEmptyObj(this.rule)) {
      this.$on('k.form.blur', this.validate)
    }
  },
  methods: {
    validate() {
      let validator = new schema(this.rule);
      return new Promise((resolve, reject) => {
        validator.validate(this.model, (error, fields) => {
          if (error) {
            this.showError = true;
            const [err] = error;
            this.errorMessage = err.message;
            reject(err);
          } else {
            this.showError = false
            resolve(true);
          }
        });
      });
    }
  }
}
</script>

<style lang="less">
.form-item {
    padding-bottom: 24px;
}

.form-item__message {
    color: #D40000;
    font-size: 12px;
    padding-top: 12px;
    // position absolute
}

.message-enter-active,
.message-leave-active {
    opacity: 1;
    transform: scaleY(1);
    transition: all 0.2s;
    transform-origin: center top;
}

.message-enter,
.message-leave-to {
    /* .fade-leave-active below version 2.1.8 */
    opacity: 0;
    transform: scaleY(0);
}

.form-item-fields__error {
    .form-item-input {
        input {
            border-color: #D50505;
        }
    }

    .select-city {
        .vux-cell-box {
            border-color: #D50505;
        }
    }

    .store-picker-sc {
        .storepicker-cell-out {
            border-color: #D50505;
        }
    }
}
</style>
